<template>
	<view class="wrap">
		<view class="head_box" :class="retData.info.grade=='B'?'ye_bg':retData.info.grade=='C'?'or_bg':retData.info.grade=='D'?'rd_bg':''">
			<view class="head_right">
				<view class="head_right_num" v-if="retData.info.score">
					{{retData.info.score}}<text>分</text>
				</view>
				<view class="head_right_num" v-else>
					0<text>分</text>
				</view>
				<view class="head_right_rank">
					<view class="head_right_rank_spot" :class="retData.info.grade=='B'?'ye_bg':retData.info.grade=='C'?'or_bg':retData.info.grade=='D'?'rd_bg':''"></view>
					<view class="head_right_rank_text" :class="retData.info.grade=='B'?'ye_color':retData.info.grade=='C'?'or_color':retData.info.grade=='D'?'rd_color':''">
						{{retData.info.grade}}级
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="gap"></view> -->
		<view class="title_box" v-if="retData.item_list.length">
			<view class="title_box_left">
				<view class="title_line"></view>
				<view class="title_text">
					添加剂
				</view>
			</view>
		</view>
		<view class="rank_box" v-for="(item,index) in retData.item_list" :key="index">
			<view class="rank_title" @click="retDataItemFun(index)">
				<view class="rank_title_left">
					<view class="rank_title_spot" :class="item.grade=='B'?'ye_bg':item.grade=='C'?'or_bg':item.grade=='A'?'gr_bg':''"></view>
					<view class="rank_title_text">
						{{item.grade}}级
					</view>
					<view class="rank_title_tisp" :class="item.grade=='B'?'ye_color ye_border':item.grade=='C'?'or_color or_border':item.grade=='A'?'gr_color gr_border':''">
						{{item.name}}
					</view>
				</view>
				<view class="rank_title_right">
					<view class="rank_title_right_text">
						{{item.item.length}}个
					</view>
					<view class="rank_title_right_icon" :style="item.bottomMain?'transform: rotate(90deg);':'transform: rotate(0deg);'">
						<u-icon name="arrow-right" color="#737373" size="10"></u-icon>
					</view>
				</view>
			</view>
			<block v-if="item.bottomMain">
				<view class="rank_list" v-for="(items,indexs) in item.item" :key="indexs">
					<view class="rank_list_left">
						<view class="rank_list_line" :class="item.grade=='B'?'ye_bg':item.grade=='C'?'or_bg':item.grade=='A'?'gr_bg':''"></view>
						<view class="rank_list_info">
							<view class="rank_list_title">
								{{items.name}}
							</view>
							<view class="rank_list_text">
								{{items.explain}}
							</view>
						</view>
					</view>
					<view class="rank_list_right" @click="toInfoFun(items)">
						<image :src="imgUrl + '13.png'" mode="aspectFill"></image>
					</view>
				</view>
			</block>
		</view>
		<view class="tisp_gap"></view>
		
		<view class="expand_box" v-if="isExpand">
			<view class="expand_info">
				<view class="expand_text" @click="$u.route('/pages/scans/upload?type=2')">
					纠错
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				kcals:3,
				kcalss:1,
				isType:true,
				isExpand:false,
				navBarHeight:'',
				isShare:false,//分享后显示
				retData:{
					info:{},
					item_list:[]
				},
			};
		},
		onLoad() {
			let that = this;
			uni.getSystemInfo({
			    success: function (res) {
					that.navBarHeight = res.windowTop *2
			    }
			});
		},
		onShow(){
			this.retData = uni.getStorageSync('RetData')
			this.retData.item_list = this.retData.item_list.map((item)=>{
				item.bottomMain = false
				return item
			})
		},
		methods:{
			toInfoFun(item){
				uni.navigateTo({
					url:'/pages/scans/details?id='+item.id
				})
			},
			onNavigationBarButtonTap(e){
				this.isExpand = !this.isExpand
			},
			retDataItemFun(index){
				this.retData.item_list = this.retData.item_list.map((item,nums)=>{
					if(index == nums){
						if(item.bottomMain){
							item.bottomMain = false
						}else{
							item.bottomMain = true
						}
					}					
					return item
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.line1{
		white-space: nowrap;
		overflow: hidden;//文本超出隐藏
		text-overflow: ellipsis;//文本超出省略号替代
	}
	.rd_color {
		color: #ee3a3a !important;
	}
	
	.rd_bg {
		background: #ee3a3a !important;
	}
	
	.rd_border {
		border: 1rpx solid #ee3a3a;
	}
	.or_color{
		color: #F5752C !important;
	}
	.or_bg{
		background: #F5752C !important;
	}
	.or_border{
		border: 1rpx solid #F5752C;
	}
	.ye_color{
		color: #FEC817 !important;
	}
	.ye_bg{
		background: #FEC817 !important;
	}
	.ye_border{
		border: 1rpx solid #FEC817 !important;
	}
	.gr_color{
		color: #30C285 !important;
	}
	.gr_bg{
		background: #30C285 !important;
	}
	.gr_border{
		border: 1rpx solid #30C285 !important;
	}
	.wrap{
		padding-bottom:60rpx;
		.head_box{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 750rpx;
			height: 240rpx;
			background: #22c58a;
			margin-bottom: 30rpx;
			.head_right{
				display: flex;
				align-items: center;
				flex-direction: column;
				.head_right_num{
					font-size: 80rpx;
					font-weight: bold;
					color: #FFFFFF;
					text{
						font-size: 20rpx;
					}
				}
				.head_right_rank{
					width: 162rpx;
					height: 50rpx;
					background: #ffffff;
					border-radius: 25rpx;
					margin-top: 22rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					.head_right_rank_spot{
						width: 21rpx;
						height: 21rpx;
						background: #22c58a;
						border-radius: 50%;
					}
					.head_right_rank_text{
						margin-left: 6rpx;
						font-size: 24rpx;
						color: #22c58a;
					}
				}
			}
		}
		.gap{
			margin: 36rpx 0 30rpx;
			width: 750rpx;
			height: 12rpx;
			background: #f6f7fb;
		}
		.title_box{
			padding: 0 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title_box_left{
				display: flex;
				align-items: center;
				.title_line{
					width: 6rpx;
					height: 24rpx;
					background: #00b9ff;
					border-radius: 3rpx;
					margin-right: 10rpx;
				}
				.title_text{
					font-size: 34rpx;
					font-weight: bold;
					color: #434242;
				}
			}
			.title_box_right{
				font-size: 24rpx;
				color: #737373;
			}
		}
		
		.rank_box{
			width: 750rpx;
			margin-top: 32rpx;
			padding-bottom: 32rpx;
			border-bottom: 1rpx solid #F5F5F5;
			.rank_title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				.rank_title_left{
					display: flex;
					align-items: center;
					.rank_title_spot{
						width: 24rpx;
						height: 24rpx;
						background: #ee3a3a;
						border-radius: 50%;
					}
					.rank_title_text{
						margin-left: 16rpx;
						font-size: 34rpx;
						font-weight: bold;
						color: #434242;
					}
					.rank_title_tisp{
						margin-left: 16rpx;
						height: 30rpx;
						padding: 0 10rpx;
						background: rgba(238,58,58,0.04);
						border: 1rpx solid #ee3a3a;
						border-radius: 6rpx;
						font-size: 22rpx;
						text-align: center;
						line-height: 30rpx;
						color: #ee3a3a;
					}
				}
				.rank_title_right{
					display: flex;
					align-items: center;
					.rank_title_right_text{
						margin-right: 5rpx;
						font-size: 24rpx;
						color: #737373;
					}
					.rank_title_right_icon{
						margin-top: 8rpx;
					}
				}
			}
			.rank_list{
				margin-top: 32rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx 0 36rpx;
				.rank_list_left{
					display: flex;
					.rank_list_line{
						margin-top: 14rpx;
						width: 12rpx;
						height: 12rpx;
						background: #ee3a3a;
						border-radius: 50%;
					}
					.rank_list_info{
						margin-left: 20rpx;
						.rank_list_title{
							font-size: 28rpx;
							color: #434242;
						}
						.rank_list_text{
							margin-top: 10rpx;
							font-size: 24rpx;
							color: #a7a7a7;
						}
					}
				}
				.rank_list_right{
					width: 34rpx;
					height: 34rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
		.tisp_gap{
			margin: 0 0 21rpx;
			width: 750rpx;
			height: 12rpx;
			background: #f6f7fb;
		}
	}
	.expand_box{
		position: fixed;
		top: 103rpx;
		//#ifdef APP-PLUS
		top: 10rpx;
		//#endif
		right: 48rpx;
		width: 232rpx;
		height: 101rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0,0,0,0.16);
		.expand_info{
			width: 232rpx;
			height: 101rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.expand_text{
				font-size: 28rpx;
				text-align: center;
				color: #434242;
			}
			.expand_line{
				margin: 30rpx 0;
				width: 178rpx;
				height: 1rpx;
				background: #ededed;
			}
		}
	}
	.share_box{
		z-index: 9999;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 36rpx 0 40rpx;
		width: 750rpx;
		height: 137rpx;
		background: rgba(0,0,0,0.72);
		.share_left{
			
			.share_left_title{
				font-size: 34rpx;
				font-weight: bold;
				color: #ffffff;
			}
			.share_left_text{
				margin-top: 5rpx;
				font-size: 24rpx;
				color: #a7a7a7;
			}
		}
		.share_right{
			display: flex;
			align-items: center;
			.share_right_btn{
				width: 180rpx;
				height: 85rpx;
				background: #00cf6c;
				border-radius: 43rpx;
				box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,185,255,0.20);
				font-size: 30rpx;
				font-weight: bold;
				line-height: 85rpx;
				text-align: center;
				color: #ffffff;
			}
		}
	}
</style>
